<template>
	<div class="myMoneyForm" :style="{height: carryHeight + 'px'}">
		<div class="form">
			<div class="tit">我的余额：<em>{{userInfo.sum}}</em></div>
			<div class="form-item">
				<label class="lab"><img src="../assets/img/namechar.png" class="name"></label>
				<input type="text" name="" placeholder="请输入您的姓名">
			</div>
			<div class="form-item">
				<label class="lab"><img src="../assets/img/idchar.png" class="idchar"></label>
				<input type="text" name="" placeholder="请输入您的ID号">
			</div>
				<div class="form-item">
				<label class="lab"><img src="../assets/img/duihuan.png" class="idsum"></label>
				<input type="number" name="" placeholder="请输入兑换的金额">
			</div>
			<div class="form-item">
				<label class="lab"><img src="../assets/img/duihuanfangshichar.png" class="duihuanfangshi"></label>

				<label v-for="(item,index) in pay">

					<img :src="item.png" height="56" width="56" class="icon">
					<input type="radio" name="radioIpt" class="radioIpt" @click="change(index)" >
				</label>
			</div>

			<div class="form-item" v-show="inputShow==0">
				<label class="lab"><img src="../assets/img/moubaozhanghaochar.png" class="moubaozhanghao"></label>
				<input type="text" name="" placeholder="请输入您的某宝账号">
			</div>

			<div class="form-item" v-show="inputShow==1">
					<label class="lab"><img src="../assets/img/zhanghaochar.png" class="zhanghao"></label>
					<input type="text" name="bottomNav.vue" placeholder="请输入您的账号">
				</div>
				<div class="form-item"  v-show="inputShow==1">
					<label class="lab"><img src="../assets/img/kaihudichar.png" class="kaihudi"></label>
					<input type="text" name="" placeholder="请输入您的开户地">
			</div>
			<div class="form-item a-upload" v-show="inputShow==2">
			<label>上传文件</label>
			<input type="file" name="" value="" id="upload" @change="fileChange" accept="image/*/">
  			</div>
			<div class="form-item">
				<button class="subBtn"></button>
				<p>注意：三种兑换方式三选一即可~</p>
			</div>
		</div>
		<div class="wordInfo">
			兑换时间早上8:00~晚上12:00；由于微信近期出现各种漏洞，用户每天限制兑换，限制用户兑换金币最低为2金币，兑换长时间未到账的用户，请检查是否已经实名，如果已经实名，平台会间隔2个小时，会再次推送。
		</div>
		<bottom-nav></bottom-nav>
	</div>
</template>

<script>
	import bottomNav from './bottomNav'
	export default {
		name: 'carry',
		data () {
			return {
				carryHeight: 0,
				inputShow:0,
				pay:[
				{
					"png": require("../assets/img/zhifubao.png"),
				},
				{
					"png":require("../assets/img/bankCard.png"),
				},				
				{
					"png":require("../assets/img/weixin.png"),
				},
				],
				userInfo:''
			}
		},
		components: {bottomNav},
		mounted () {
			this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
			var VueFileUpload = require('vue-file-upload');

		},
		created() {
			this.init();
		},
		methods: {
			init () {

				this.carryHeight = (document.documentElement.clientHeight - document.documentElement.clientHeight/750*4.9*10);			
			},
			openDialog() {
				MessageBox({
					message: '<p>拆红包</p>',
					title: '',
					dialogClass: 'carry1Dialog',
					showCancelButton: true,
					confirmButtonText: '',
					cancelButtonText: ''
				});
			},
			change (index) {
				this.inputShow = index;
			},
			uploadFile(e){

				var filename = e.target.files[0];

				console.log(filename)

				var that = this;
				this.axios({
				 method:'post',
				 url:"http://xyydj.daoapp.io/mobile/member/upload?openid=" + that.userInfo.openid,
				 data:{
					 "qrcode":filename
				 }
				}).then(function(res){
						console.log(res)
						// that.redListist = res.data.data;

				})
			}

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.myMoneyForm{padding: 2.2rem 2.1rem;background: url(../assets/img/myMoneyBg.png) center 0 #f9ecdb no-repeat;background-size: 100% auto;width: 100%;box-sizing: border-box;}
.myMoneyForm .form{margin: 0 auto;padding: 2.3rem 1rem;width: 32.9rem;height: 39rem;border: 4px solid #fbcd91;border-radius: 12px;background: #fff;box-sizing: border-box;}
.form-item {
	height: 4.2rem !important;
}
.a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}
.form .tit{text-align: center;font-size: 1.8rem;}
.form .tit em{color: #ef2727;}
.form-item .lab .kaihudi{width: 5.25rem;height: 1.45rem;}
.form-item .lab .zhanghao{width: 3.65rem;height: 1.45rem;}
.form-item{padding: 1rem 0;width: 100%;height: 5.2rem;box-sizing: border-box;}
.form-item .lab{display: inline-block;width: 7.5rem;text-align: right;}
.form-item .lab img{vertical-align: middle;}
.form-item .lab .name{width: 3.7rem;height: 1.4rem;}
.form-item .lab .idchar{width: 1.85rem;height: 1.3rem;}
.form-item .lab .duihuanfangshi{width: 5.9rem;height: 1.1.25rem;}
.form-item .lab .moubaozhanghao{width: 6.85rem;height: 1.45rem;}
.form-item input[type="text"]{padding-left: .5rem;width: 20.5rem;height: 3.2rem;line-height: 3.3rem;border: 1px solid #fbd6a6;border-radius: 8px;}
.form-item input[type="number"]{padding-left: .5rem;width: 20.5rem;height: 3.2rem;line-height: 3.3rem;border: 1px solid #fbd6a6;border-radius: 8px;}
.radioIpt{outline: none;-webkit-appearance: none;border: none;background: none;width: 2rem;height: 2rem;}
.radioIpt:after{content: "";display: inline-block;background: url(../assets/img/formRadio.png) center no-repeat;background-size: 2rem;width: 2rem;height: 2rem;}
.radioIpt:checked:after{content: "";background: url(../assets/img/formRadioChecked.png) center no-repeat;background-size: 2rem;}
.form-item .icon{width: 2.8rem;height: 2.8rem;}
.form-item .subBtn{display: block;margin: 0 auto;border: none;background: url(../assets/img/subBtn1.png) center no-repeat;background-size: 16.65rem auto;width: 16.65rem;height: 3.45rem;}
.form-item p{color: #ef2238;font-size: 1.3rem;text-align: center;line-height: 3.5;}
.idsum{width: 5.5rem;height: 1.5rem;}
.wordInfo{padding-top: 1rem;font-size: 1.3rem;color: #ef2238;line-height: 2.5;}
</style>
